<template>
	<view>
		<view class="flex-col section">
			<view class="flex-col group_2">
				<view class="flex-col section_2 space-y-45">
					<text class="self-center font_1 text">看板</text>
					<!-- <view class="flex-row justify-between items-end">
						<view class="flex-row items-end space-x-5">
							<text class="text_3">{{shop_name?shop_name:'请选择店铺'}}</text>
							<view class="flex-col justify-start items-center shrink-0 text-wrapper">
								<text class="font_2 text_2">在线</text>
							</view>
						</view>
						<view class="flex-row group_3 space-x-7">
							<text class="font_3 text_4" @click="show = true">切换门店</text>
							</view>
					</view> -->
				</view>
				<view class="flex-col relative section_3 space-y-14">
					<view class="grid">
						<view class="flex-col items-center grid-item space-y-21">
							<text class="font_4">{{numList.all}}</text>
							<text class="font_5">总桌台</text>
						</view>
						<view class="flex-col items-center grid-item space-y-22">
							<text class="font_4 text_5">{{numList.work}}</text>
							<text class="font_5">使用中</text>
						</view>
						<view class="flex-col items-center grid-item space-y-21">
							<text class="font_4">{{numList.down}}</text>
							<text class="font_5">空闲</text>
						</view>
						<view class="flex-col grid-item_2 space-y-16" v-for="item in ballList">
							<view class="flex-col items-center section_4 space-y-11">
								<text class="font_1">{{item.f_eq_no}}</text>
								<text class="font_6">{{item.f_union_code}}</text>
							</view>
							<text class="self-center font_5">{{item.f_status==0?'空闲中':'对局中'}}</text>
						</view>
					</view>


				</view>
			</view>
			<text class="self-start font_9 text_6">公共设备</text>
			<view class="flex-row equal-division space-x-28">
				<view class="flex-col equal-division-item space-y-29">
					<view class="flex-row group_6 space-x-14">
						<image class="image_2"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/3846810eb0162d400993cd570318b1ee.png" />
						<text class="self-start font_10 text_7">空调15</text>
					</view>
					<text class="self-start font_11 text_8">已关闭</text>
				</view>
				<view class="flex-col equal-division-item space-y-29">
					<view class="flex-row group_6 space-x-14">
						<image class="image_2"
							src="https://gongxiangtaiqiu.axa2.com/taiqiu/3846810eb0162d400993cd570318b1ee.png" />
						<text class="self-start font_10 text_7">空调16</text>
					</view>
					<text class="self-start font_11 text_9">已打开</text>
				</view>
			</view>
			<text class="self-start font_9 text_10">监控</text>
			<view class="flex-col justify-start section_8">
				<view class="grid_2">
					<image class="grid-item_5"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796369839162819364.png" />
					<image class="grid-item_6"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796369839212487329.png" />
					<image class="grid-item_5"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796369839162819364.png" />
					<image class="grid-item_5"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796369839212487329.png" />
					<image class="grid-item_5"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796369839212487329.png" />
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="shopList" @confirm="confirm"></u-select>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/home_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/home.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban.png",
						text: '看板',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_tabbar.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				shopList: {},
				current1: 0,
				value: '',
				type: 'select',
				show: false,
				shop_name: uni.getStorageSync('shop_name'),
				ballList: {},
				numList: {},
				status:uni.getStorageSync('newstatue'),
				arealist: [{
						value: '1',
						label: '铁西滑翔店'
					},
					{
						value: '2',
						label: '华强广场店铺'
					}
				],
			};
		},
		created() {		
			if(this.shop_name == ''){
				uni.showToast({
					icon:'none',
					title:'请先选择店铺哦 ~'
				})
			}
			// console.log(this.shop_name,'当前店铺')
			this.equipment()
			this.shop()
		},
		onShow() {
			this.equipment()
		},
		watch:{
			 status(val, value) {
			        console.log(val)
			        console.log(value)
			    }

			// uni.getStorageSync('newstatue')
		},
		methods: {
			//设备列表
			equipment() {
				this.$Api.EqList({
					shopId: uni.getStorageSync('shop_id'),
					page: 1,
					pageNum: 15

				}).then(res => {
					this.ballList = res.data.data
					this.numList = res.data.num
					// console.log(this.ballList[0].f_eq_no, '设备列表')
					console.log(res.data.num, 'num列表')
				})
			},
			// 商家店铺列表
			shop() {
				this.$Api.getMyShop({
					userId: uni.getStorageSync('userid'),
					
					
				}).then(res => {
					console.log(res.data.data, '12121212')
					let arr = res.data.data
					this.shopList = arr.map(item => {
						return {
							label: item.f_shop_name,
							value: item.id
						}
					})
					console.log(this.shopList)
				});
			},
			//店铺选择
			confirm(e) {
				this.shop_name = e[0].label
				this.shop_id = e[0].value
				uni.setStorageSync('shop_id', this.shop_id);
				uni.setStorageSync('shop_name', this.shop_name);
				console.log(this.shop_id, this.shop_name);
			},
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.section {
		/* padding-bottom: 209rpx; */
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_2 {
		height: 1005rpx;
	}

	.section_2 {
		padding: 105rpx 30rpx 496rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-45>view:not(:first-child),
	.space-y-45>text:not(:first-child),
	.space-y-45>image:not(:first-child) {
		margin-top: 45rpx;
	}

	.font_1 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.text {
		line-height: 34rpx;
	}

	.space-x-5>view:not(:first-child),
	.space-x-5>text:not(:first-child),
	.space-x-5>image:not(:first-child) {
		margin-left: 5rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.text-wrapper {
		padding: 10rpx 0;
		background-image: linear-gradient(90deg, #ffa229 0%, #ffca29 100%);
		border-radius: 10rpx 10rpx 10rpx 0px;
		width: 88rpx;
		height: 44rpx;
		border: solid 1rpx #ffa229;
	}

	.font_2 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #9f9f9f;
	}

	.text_2 {
		color: #222222;
		line-height: 22rpx;
	}

	.group_3 {
		margin-bottom: 4rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.text_4 {
		line-height: 23rpx;
	}

	.image {
		width: 24rpx;
		height: 22rpx;
	}

	.section_3 {
		margin: -456rpx 30rpx 0;
		padding-bottom: 43rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-14>view:not(:first-child),
	.space-y-14>text:not(:first-child),
	.space-y-14>image:not(:first-child) {
		margin-top: 14rpx;
	}

	.grid {
		padding: 0 16rpx;
		height: 373px;
		overflow-y: scroll;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 14rpx;
	}

	.grid-item {
		padding: 55rpx 0 28rpx;
	}

	.space-y-21>view:not(:first-child),
	.space-y-21>text:not(:first-child),
	.space-y-21>image:not(:first-child) {
		margin-top: 21rpx;
	}

	.font_4 {
		font-size: 52rpx;
		font-family: PingFang SC;
		line-height: 39rpx;
		font-weight: 700;
		color: #222222;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.space-y-22>view:not(:first-child),
	.space-y-22>text:not(:first-child),
	.space-y-22>image:not(:first-child) {
		margin-top: 22rpx;
	}

	.text_5 {
		line-height: 38rpx;
	}

	.grid-item_2 {
		padding: 0 14rpx 10rpx;
	}

	.section_4 {
		padding: 31rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.space-y-11>view:not(:first-child),
	.space-y-11>text:not(:first-child),
	.space-y-11>image:not(:first-child) {
		margin-top: 11rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #fefffef7;
	}

	.grid-item_3 {
		padding: 0 14rpx 9rpx;
	}

	.grid-item_4 {
		padding: 0 10rpx 9rpx 18rpx;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 16rpx;
	}

	.section_5 {
		padding: 32rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		padding: 0 30rpx;
	}

	.section_6 {
		padding: 32rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 190rpx;
	}

	.font_7 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 700;
		color: #0e6031;
	}

	.font_8 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #0e6031;
	}

	.section_7 {
		padding: 32rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 190rpx;
	}

	.space-y-10>view:not(:first-child),
	.space-y-10>text:not(:first-child),
	.space-y-10>image:not(:first-child) {
		margin-top: 10rpx;
	}

	.pos {
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.group_5 {
		padding: 0 90rpx;
	}

	.pos_2 {
		position: absolute;
		left: 90rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_9 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_6 {
		margin-left: 31rpx;
		margin-top: 41rpx;
		line-height: 27rpx;
	}

	.equal-division {
		margin: 31rpx 32rpx 0;
	}

	.space-x-28>view:not(:first-child),
	.space-x-28>text:not(:first-child),
	.space-x-28>image:not(:first-child) {
		margin-left: 28rpx;
	}

	.equal-division-item {
		flex: 1 1 330rpx;
		padding: 36rpx 28rpx 42rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		height: 180rpx;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 29rpx;
	}

	.group_6 {
		padding: 0 4rpx;
	}

	.space-x-14>view:not(:first-child),
	.space-x-14>text:not(:first-child),
	.space-x-14>image:not(:first-child) {
		margin-left: 14rpx;
	}

	.image_2 {
		width: 48rpx;
		height: 48rpx;
	}

	.font_10 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_7 {
		margin-top: 4rpx;
		line-height: 26rpx;
	}

	.font_11 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
	}

	.text_8 {
		color: #999999;
	}

	.text_9 {
		color: #222222;
	}

	.text_10 {
		margin-left: 31rpx;
		margin-top: 41rpx;
		line-height: 27rpx;
	}

	.section_8 {
		margin: 31rpx 30rpx 0;
		padding: 20rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.grid_2 {
		margin: 0 20rpx;
		height: 640rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 23rpx;
		column-gap: 22rpx;
	}

	.grid-item_5 {
		border-radius: 8rpx;
		width: 315rpx;
		height: 200rpx;
	}

	.grid-item_6 {
		width: 315rpx;
		height: 200rpx;
	}
</style>
